<link rel="stylesheet" href="${basePath}/resources/common/css/iPicture.css">
<section class="content-header">
	<h1>
		监控数据 <small>列表</small>
	</h1>
	<ol class="breadcrumb">
		<li><a href="${basePath}"><i class="fa fa-dashboard"></i> 首页</a></li>
		<li><a href="#">数据采集</a></li>
		<li class="active">监控数据</li>
	</ol>
</section>

<section class="content">
	<div class="row">
		<div class="col-md-2" style="padding-left: 5px; padding-right: 5px;">

			<!-- Profile Image -->
			<div class="box box-primary">
				<div class="box-body box-profile">
					<div id="tree"></div>
				</div>
				<!-- /.box-body -->
			</div>
			<!-- /.box -->
		</div>

		<div class="col-md-6" style="padding-left: 5px; padding-right: 5px;">
			<div class="box box-primary">
				<div id="iPicture" data-interaction="hover">
					<div id="marker" class="ip_slide">
						

					</div>
				</div>

			</div>
		</div>
		<div class="col-md-4" style="padding-left: 5px; padding-right: 5px;">
		
			<div class="box box-primary">
            <div class="box-header ui-sortable-handle" style="cursor: move;">
              <i class="fa fa-envelope"></i>

              <h3 class="box-title">设备数据</h3>
            </div>
            <!-- /.box-header -->
            <div id="sensor_list" class="box-body">
              

            </div>
            <!-- /.box-body -->
            <div id="history" class="box-footer text-center">
              
            </div>
            <!-- /.box-footer -->
          </div>
		
		</div>
	</div>
</section>

<script
	src="${basePath}/resources/common/js/jquery.ipicture.js"></script>
<script>
	var selectNode;//选定的基地
	var selectMarker;//选定的采集器
	var device_id;
	//点击传感器显示传感器数据
	function markerOnclick(marker){
		if(!marker){
			return;
		}
		var deviceObj;
		var sensors;
		if(marker.id){
			device_id = marker.id;
		}else{
			device_id = marker;			
		}
		device_id = device_id.replace('dev_','');
		ajaxPost(basePath + "/device/get/"+device_id, null, function(data) {
			deviceObj = data;
		});
		if(deviceObj.type == "设备"){ //摄像头加载视频直播窗口
			var cameraHtml = '<div style="height:600px;"><iframe id="iframe-video" src="${basePath}/camera/video/'+device_id+'" width="100%" height="100%" frameborder="0"></iframe></div>';
			$("#sensor_list").empty();
			$("#sensor_list").append(cameraHtml);
			$("#history").empty();
		}else if(deviceObj.type == "基地"){
			currentObj.initTree(parseInt(deviceObj.port));
		}else if(deviceObj.type == "采集器"){//采集器渲染传感器的数据
			ajaxPost(basePath + "/device/getSensorByDevice/"+device_id, null, function(data) {
				if(data.success){
					sensors = data.data;
				}
			});
			if(sensors && sensors.length>0){
				var sensorList = '';
				var divStyle = new Array('bg-aqua','bg-green','bg-yellow');
				var index = 0;
				for(var z=0;z<sensors.length;z++){
					if(z %3 == 0 && z !=0) {
						sensorList += '<div class="row" style="margin-left: 0px; margin-right: 0px;">';
					}
					if(z %3 == 0){
						sensorList += '<div class="row" style="margin-left: 0px; margin-right: 0px;">';
						index = 0;
					}
					
					sensorList += '	<div class="col-md-4" style="padding-left:2px; padding-right: 2px"><div class="small-box ';
					sensorList += divStyle[index];
					sensorList += '"><div class="inner" style="padding: 3px;"><h4 style="margin: 0 0 2px 0;margin-left: ">';
					sensorList += sensors[z].name;
					sensorList += '<sup style="font-size: 20px;top:0px; margin-left: 3px;">';
					sensorList += sensors[z].unit;
					sensorList += '</h4><p style="margin: 0 0 0;"><sup id="SEN_'+sensors[z].sensorId+'" style="font-size: 20px;top:0px;">';
					sensorList += sensors[z].values; //TODO 获取值
					sensorList += '</sup></p>';
					sensorList += '</div><div class="icon" style="top: -50px; right: 5px;"><i class="iconfont ';
					sensorList += sensors[z].icon;
					sensorList += '" style="font-size: 40px;"></i></div><a href="#" onclick="loadHistery()" class="small-box-footer"> 历史数据 <i class="fa fa-arrow-circle-right"></i></a></div></div>';
					index++;
				}
				sensorList +='</div>';
				$("#sensor_list").empty();
				$("#sensor_list").append(sensorList);
				$("#history").empty();
				$("#history").append('<a href="#" onclick="loadHistery()" class="uppercase">查看历史数据</a>');
			}
		}
		
	}
	
	function openWind(deviceObj){
		
	}
	
	var currentObj = {
		initTree : function (selectNodeId) {
			var self = this;
			var treeData = null;
			ajaxPost(basePath + "/org/treeData", null, function(data) {
				treeData = data;
			});
			//console.info(treeData);
			$("#tree").treeview({
				data : treeData,
				showBorder : true,
				expandIcon : "glyphicon glyphicon-stop",
				collapseIcon : "glyphicon glyphicon-unchecked",
				levels : 3,
				onNodeSelected : function(event, data) {
					selectNode = data.id;
					$("#sensor_list").empty();//标点之前清除传感器数据
					currentObj.loadMarkData(data.id);
				}
			});
			if (treeData.length == 0)
				return;
			//默认选中第一个节点
			selectNodeId = selectNodeId || 0;
			$("#tree").data('treeview').selectNode(selectNodeId);
			$("#tree").data('treeview').expandNode(selectNodeId);
			$("#tree").data('treeview').revealNode(selectNodeId);
		},
		loadMarkData: function (selectTreeNode){
			var markData = null;
			var tempNode;
			var map;
			
			ajaxPost(basePath + "/mapsetting/getByOrgId/"+selectTreeNode, null, function(data) {
				if(data.success){
					map = data.data;
				}
			});
			
			if(map){//如果有地图设置，则优先加载地图设置
				var mapHtml = '<div style="height:600px;"><iframe id="iframe-map" src="${basePath}/mapsetting/showmap/'+map.id+'" width="100%" height="100%" frameborder="0"></iframe></div>';
				$("#marker").empty();
				$("#marker").append(mapHtml);
			}else{
				ajaxPost(basePath + "/scene/getMarkData/"+selectTreeNode, null, function(data) {
					if(data.success){
						markData = data.data;
					}
				});
				if(markData && markData.org && markData.org.images){
					tempNode = '<img class="img-responsive" style="width: 100%;" src="'+basePath + markData.org.images+'"/>';
				}
				if(markData && markData.devices && markData.devices.length >0){
					var devices = markData.devices;
					var buttonClass = "deviceButton"
					for(var k=0; k< devices.length; k++){
						if(k == 0){
							selectMarker = devices[k].id;//默认选择采集器
						}
						if(devices[k].type == '设备'){
							buttonClass = 'cameraButton';
						}
						tempNode += '<div id="dev_'+devices[k].id+'" class="ip_tooltip ip_img32" onclick="markerOnclick(this)" style="top: '+devices[k].py+'; left: '+devices[k].px+';" data-tooltipbg="bgblack" data-button="'+buttonClass+'" data-round="roundBgW" data-animationtype="btt-slide"></div>';
					}
				}
				$("#marker").empty();
				$("#marker").append(tempNode);
				//console.info(tempNode);
				var ipicture = $("#iPicture").iPicture();
				//加载采集器数据
				markerOnclick(selectMarker);
			}
			
		},
		
		lookupData: function (){
			//selectNode orgId;根据orgId查询设备并将设备信息pop出来
			ajaxPost(basePath + "/scene/lookupData/"+selectNode, null, function(data) {
				if(data.success){
					currentObj.fillData(data.data);
				}
			});
			ajaxPost(basePath + "/device/getSensorByDevice/"+device_id, null, function(data) {
				if(data.success){
					currentObj.fillSceneData(data.data);
				}
			});
		},
		
		fillData : function (fillData){
			if(fillData && fillData.length > 0){
				for(var i=0;i<fillData.length; i++){
					$("#dev_"+fillData[i].key).empty();
					$("#dev_"+fillData[i].key).append('<p>'+fillData[i].value+'</p>');
				}
				$("#iPicture").iPicture();
			}
		},
		
		fillSceneData : function (sceneData){
			if(sceneData && sceneData.length > 0){
				for(var i=0;i<sceneData.length; i++){
					$("#SEN_"+sceneData[i].sensorId).empty();
					$("#SEN_"+sceneData[i].sensorId).append(sceneData[i].values);
				}
			}
		}
	}
	
	

	$(function() {
		currentObj.initTree(0);
		setInterval(function(){
			currentObj.lookupData();
		},30000);
	})

	function loadHistery(){
        window.loadPage(basePath+"/data/history");
    }
</script>